<script setup lang="ts">
  import type { BlogPost } from '@/types/blog'

  interface Props {
    posts: BlogPost[]
    loading: boolean
  }

  const props = defineProps<Props>()

  const emit = defineEmits<{
    'post-click': [postId: string]
  }>()

  const handlePostClick = (postId: string) => {
    emit('post-click', postId)
  }
</script>

<template>
  <div class="recent-posts">
    <div v-if="props.loading" class="loading-skeleton">
      <div v-for="i in 3" :key="i" class="skeleton-item">
        <div class="skeleton-content">
          <div class="skeleton-title"></div>
          <div class="skeleton-summary"></div>
          <div class="skeleton-meta"></div>
        </div>
      </div>
    </div>

    <div v-else-if="props.posts.length === 0" class="empty-state">
      <div class="empty-icon">📝</div>
      <p>暂无文章</p>
    </div>

    <div v-else class="posts-list">
      <article
        v-for="post in props.posts"
        :key="post.id"
        class="post-item"
        @click="handlePostClick(post.id)"
      >
        <div class="post-content">
          <h3 class="post-title">{{ post.title }}</h3>
          <p class="post-summary">{{ post.summary }}</p>

          <div class="post-meta">
            <div class="meta-left">
              <span class="category">{{ post.category }}</span>
              <span class="publish-date">
                {{ new Date(post.publishDate).toLocaleDateString('zh-CN') }}
              </span>
            </div>
            <div class="meta-right">
              <span class="read-time">{{ post.readTime }}</span>
              <span class="views">{{ post.views }} 次阅读</span>
            </div>
          </div>

          <div class="post-tags">
            <span v-for="tag in post.tags.slice(0, 3)" :key="tag" class="tag">
              {{ tag }}
            </span>
          </div>
        </div>

        <div class="post-stats">
          <div class="stat">
            <span class="stat-icon">👁</span>
            <span class="stat-value">{{ post.views }}</span>
          </div>
          <div class="stat">
            <span class="stat-icon">❤️</span>
            <span class="stat-value">{{ post.likes }}</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .recent-posts {
    width: 100%;
  }

  /* 加载骨架屏 */
  .loading-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .skeleton-item {
    padding: 1.5rem;
    background: var(--bg-color);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
  }

  .skeleton-title,
  .skeleton-summary,
  .skeleton-meta {
    height: 1rem;
    background: linear-gradient(
      90deg,
      var(--bg-secondary) 25%,
      var(--bg-tertiary) 50%,
      var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
  }

  .skeleton-title {
    height: 1.25rem;
    width: 85%;
  }

  .skeleton-summary {
    width: 100%;
  }

  .skeleton-meta {
    width: 60%;
    margin-bottom: 0;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  /* 空状态 */
  .empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);

    .empty-icon {
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }

    p {
      margin: 0;
    }
  }

  /* 文章列表 */
  .posts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .post-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      border-color: var(--primary-color);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
  }

  .post-content {
    flex: 1;
    min-width: 0;
  }

  .post-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &:hover {
      color: var(--primary-color);
    }
  }

  .post-summary {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
  }

  .meta-left {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .meta-right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .category {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .post-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .tag {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;

    &:hover {
      background: var(--primary-light);
      color: var(--primary-color);
    }
  }

  /* 文章统计 */
  .post-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1rem;
    align-items: center;
  }

  .stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
  }

  .stat-icon {
    font-size: 0.9rem;
  }

  .stat-value {
    font-weight: 500;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .post-item {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
    }

    .post-stats {
      flex-direction: row;
      justify-content: flex-end;
      margin-left: 0;
    }

    .post-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .meta-left,
    .meta-right {
      gap: 0.75rem;
    }
  }

  @media (max-width: 480px) {
    .post-item {
      padding: 1rem;
    }

    .post-title {
      font-size: 1.1rem;
    }

    .meta-left,
    .meta-right {
      flex-wrap: wrap;
      gap: 0.5rem;
    }
  }
</style>
